<template>
  <div id="app" style="height: 100%;width: 100%">

    <div class="back">
      <div class="body-text">
        <!-- 顶部：填写作品信息 上传参赛作品 -->
        <div style="position: relative;">
          <div class="total-block">
            <div class="total-left">
              <text style="color:white;font-weight: bold;">填写作品信息</text>
            </div>
            <div class="total-right">
              <text style="font-weight: bold;">上传参赛作品</text>
            </div>
            <!-- 中间的三角形 -->
            <div class="total-mid"></div>
          </div>
        </div>
        <!-- 编辑按钮 -->
        <div style="width:100%;margin-bottom:20px"><el-row class="mb-4" style="margin-left: 5%;">
          <el-button type="primary" style="width: 75px; height: 35px;">
            <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z"></path></svg>
            <text style="font-size:13px">编辑</text>
          </el-button>
        </el-row></div>
        <!-- 表单部分 -->
        <div style="width: 94%;border: #DCDCDC 1px solid;margin-top: 1px;border-radius: 8px;display: flex;flex-direction: row">

          <!--    表头      -->
          <div style="width: 240px;border-right: #DCDCDC 1px solid;">
              <div style="margin-top: 100px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 800px">
                <text style="margin-left: 150px" class="formText">课堂实录</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 175px" class="formText">教案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 119px" class="formText">教学实施报告</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 91px" class="formText">专业人才培养方案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 147px" class="formText">课程标准</text>
              </div>
              <div style="margin-top: 15px;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 119px;" class="formText">教程选用说明</text>
              </div>
          </div>

          <!--     表单文件     -->
          <div style="">
             <!--     注意事项       -->
            <div style="margin-top: 10px;margin-left: 20px;">
              <text style="font-size: 11px;color: #C0C0C0">请上传MP4格式的视频，最多可上传12个视频，且单个视频文件大小不超过500M</text>
            </div>

            <!--     团队1       -->
            <div style="width: 100%;margin-left: 20px;">
              <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
              <text class="teamText">团队 1</text>

                  <!--      视频预览框        -->
              <div style="margin-top: 10px;">
                  <el-upload :limit="1"
                             :on-exceed="handleExceed"
                              style="border: #181818 1px solid;width: 180px;height: 120px;"

                              >
                    <el-icon class="uploadPlus"><Plus /></el-icon>


                  </el-upload>


              </div>

            </div>
          </div>

        </div>





      </div>

      <!-- 底部 -->
      <div class="black-bottom">
        <text class="black-text" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>
  </div>
</template>

<style scoped>

.uploadPlus{
  margin-left: 83px;
  margin-bottom: 30px;
}


.teamText{
  font-size: 16px;
}


.formText{
  font-size: 14px;
  font-weight: bold;
}


.total-mid{

  position: absolute;
  right: -14px;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 15px solid rgb(0, 106, 255);
  border-bottom: 25px solid transparent;
}

.total-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 500px;
  height: 50px;
  background: #ececec;
}

.total-left{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1px;
  width: 500px;
  height: 50px;
  background: rgb(0, 106, 255);
}

.total-block{

  padding-bottom: 70px;

  display: flex;
  flex-direction: row;
}

.dropdown{

  margin-left: 10px;
  margin-top: 20px;
}

.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.bottom{
  margin-top: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  margin-top: 20px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.body-text{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-left: 15%;
  margin-right: 15%;

}

.back{
  width:100%;
  padding-top: 1.2%;
  background: #ececec;
}

.menu{
  overflow: hidden;
  width: 580px;
}
.top{

  border-bottom: 2px solid;
  border-bottom-color: #D3D3D3;
  display: flex;
  width: 100%;
  height: 60px;
}

.icon{


  margin-left: 240px;
  margin-right: 35px;
}

.el-menu-popper-demo{
  transform: rotateX(180deg);
}

.top-text{
  transform: rotateX(180deg);
}

.top-button{

  margin-top: 10px;
  margin-left: 50px;
}
</style>
<script setup lang="ts">
import {ArrowDown,Plus} from "@element-plus/icons-vue";
import {reactive,ref,onMounted} from "vue";
import {userLogOutService,updatePassword} from '@/api/user'
import {ElMessage,ElDialog, ElProgress,ElUpload ,genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

//文件上传
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}


const formLabelWidth = '140px';
//修改密码
const updateForm=reactive({
  oldPassword: "",
  newPassword: "",
  newPasswordConf:""
})

const showUpdatePassword=ref(false)

const update= async ()=>{

  if(updateForm.newPassword!==updateForm.newPasswordConf){
    ElMessage.error('请输入相同密码')
  }else if(updateForm.newPassword===updateForm.oldPassword){
    ElMessage.error('与旧密码相同，请重新修改')
  }else{
    //修改密码
    let res=await updatePassword(updateForm);
    ElMessage.success(res.message);
    LogOut();
    showUpdatePassword.value=false;
  }


};


//登出
const LogOut = ()=>{
  //"Logout"为封装的退出登录请求函数
  userLogOutService().then(res=>{
    console.log(res);
    //改变登录状态判断
    //showLogin.value=true;
    //直接退回首页


    ElMessage.success(res.msg? res.msg:"已退出登录");
    //清除本地记录的token
    window.localStorage.setItem('token','')
    window.localStorage.setItem('username','')
  })
};

//校验弹框框输入
const rules={
  userAccount:[
    {required:true,message:'请输入用户名',trigger: 'blur'}
  ],
  userPassword:[
    {required:true,message:'请输入密码',trigger: 'blur'}
  ],
  oldPassword:[
    {required:true,message:'请输入旧密码',trigger: 'blur'}
  ],
  newPassword:[
    {required:true,message:'请输入新密码',trigger: 'blur'}
  ],
  newPasswordConf:[
    {required:true,message:'请输入新密码',trigger: 'blur'}
  ],

};
</script>